<template>
  <div class="user-homepage">
    <div class="user-info">
        <img class="user-portrait" :src="user.avatar" alt="user.avatar"/>
      <div class="user-name">
        <p>{{user.nickName}}</p>
      </div>
    </div>
    <div class="features">
      <div class="feature-item">
        <img src="@/assets/优惠券.webp" alt="优惠券"/>
        <span>优惠券</span>
      </div>
      <div class="feature-item">
        <img src="@/assets/服务卡.webp" alt="服务卡"/>
        <span>服务卡</span>
      </div>
      <div class="feature-item">
        <img src="@/assets/会员.webp" alt="会员中心"/>
        <span>会员中心</span>
      </div>
      <div class="feature-item">
        <img src="@/assets/客服.webp" alt="客服中心"/>
        <span>客服中心</span>
      </div>
    </div>
    <div class="content">
      <div class="content-item">
        <img src="@/assets/地址.webp" alt="我的地址"/>
        <span>我的地址</span>
      </div>
      <div class="content-item" >
        <img src="@/assets/安全.webp" alt="安全中心"/>
        <span>安全中心</span>
      </div>
      <div class="content-item">
        <img src="@/assets/设置.webp" alt="设置"/>
        <span>设置</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted,ref} from "vue";
import {findAll} from "@/api/Customer.js";

const user = ref({
  id: '',
  name: '',
  nickName: '',
  realName: '',
  sex: '',
  birthday: '',
  address: '',
  phone: '',
  email: '',
  identityNum: '',
  integral: '',
  avatar: '',
});
onMounted(() => {
  searchDatas();
});

async function searchDatas(){
  let customers=await findAll();
  user.value=customers.customer;
}
</script>

<style scoped>
.user-homepage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  height: 90vh;
  background-image: url("@/assets/背景图片.webp");
  background-size: cover;
  background-repeat: no-repeat;

}

.user-info {
  margin-top: 50px;
  display: flex;
  align-items: flex-start;
}

.user-portrait {
  width: 25%;
  border-radius: 50%;
  margin-left: 5%;
  margin-right: 5%;
}

.user-name {
  font-size: 40px;
}

.features {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 90%;
  background-color: #FFFFFF;
  border: 15px solid #FFFFFF; /* 添加外边框 */
  border-radius: 15px;
}

.feature-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 20px;
  text-align: center;
  cursor: pointer;
  background-image: linear-gradient(to right, #FFA392, #FF785F ,#FF785F ,#FFFFFF, #FF785F);
}

.feature-item img{
  width: 20%;
}
.feature-item span {
  margin-left: 30px;
  font-size: 30px;
}

.content {
  margin-top: 50px;
  margin-left: 30px;
  margin-right: 30px;
  width: 90%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  background-color: #FFFFFF;
  border: 15px solid #FFFFFF; /* 添加外边框 */
  border-radius: 15px;
}

.content-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 20px;
  text-align: center;
  cursor: pointer;
  padding: 15px;

  background-image: linear-gradient(to right, #ffffff,#A5E3A6,#B9CA95 );  /* 添加渐变背景 */

}

.content-item img{
  width: 10%;
}
.content-item span {
  margin-left: 30px;
  font-size: 30px;
}
</style>
